<template>
  <div class="infos">
    <h2 :class="$attrs.abc">姓名: {{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
    <h2>身高: {{ height }}</h2>
    <h2>信息: {{ showMessage }}</h2>
  </div>

  <div class="others" v-bind="$attrs"></div>
</template>

<script>
  export default {
    // inheritAttrs: false, // 禁止继承属性
    // 作用: 定义当前子组件接收父组件的属性
    // 1.props的数组写法
    // 数组写法: 简单, 但是类型不明确,不能对类型进行校验,且不能设置默认值
    // props: ['name', 'age', 'height']
    // 2.props的对象写法
    // 对象写法: 可以对类型进行校验,且可以设置默认值,且可以设置必填项
    props: {
      showMessage: {
        type: String,
        // 设置默认值
        default: 'Hello World',
      },
      name: {
        type: String,
        // 设置默认值
        default: '张三',
        // 设置必填项
        required: true
      },
      age: {
        type: Number,
        // 设置默认值
        default: 18,
        // 设置必填项 有默认值可以不设置必填项
        required: true
      },
      height: {
        type: Number,
        // 设置默认值
        default: 1.88
      },
      friend: {
        type: Object,
        // 对象类型设置默认值需要使用函数返回对象,因为对象是引用类型,直接返回对象会报错,因为指向同一个内存地址,所以会修改默认值,所以需要返回一个新的对象,这样就不会指向同一个内存地址了,所以需要使用函数返回对象
        // 如果多个地方使用到这个组件,那么每个地方都会返回一个新的对象,所以不会修改默认值
        // default: {name: '李四', age: 18}
        default() {
          return {name: '王五', age: 18}
        }
      },
      // 可以设置多个类型
      propB: [String, Number],
      propC: {
        type: Array,
        // 数组类型设置默认值需要使用函数返回数组,因为数组是引用类型,直接返回数组会报错,因为指向同一个内存地址,所以会修改默认值,所以需要返回一个新的数组,这样就不会指向同一个内存地址了,所以需要使用函数返回数组
        default() {
          return ['a', 'b', 'c']
        }
      },
      // 必填字符串
      propD: {
        type: String,
        required: true
      },
      // 带有默认值的数字
      propE: {
        type: Number,
        default: 100
      },
      // 带有默认值的对象
      propF: {
        type: Object,
        // 对象或者数组默认值必须从一个工厂函数获取
        default() {
          return {name: '张三', age: 18}
        }
      },
      // 自定义验证函数
      propG: {
        validator(value) {
          // 这个值必须匹配下列字符串中的一个
          // return ['success', 'warning', 'danger'].indexOf(value) !== -1
          return ['success', 'warning', 'danger'].includes(value) !== -1
        }
      },
      propH: {
        type: Function,
        // 与对象或者数组默认值不同,这不是一个工厂函数,而是一个固定的函数,这是一个用作默认值的函数
        default() {
          return () => {
            console.log('hello world')
            return 'hello world'
          }
        }
      },
      propJ: {
        type: Array,
        // 对象或者数组默认值必须从一个工厂函数获取
        default() {
          return ['a', 'b', 'c']
        }
      }
      
    }
  }
</script>

<style scoped>
</style>